<!--  -->
<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>收集文件设置</span>
      </div>
    </template>
    <div style="display: flex; justify-content: space-between">
      <el-form
        label-width="100px"
        :model="formLabelAlign"
        style="max-width: 500px"
        :rules="rules"
      >
        <el-form-item label="标题：" prop="title">
          <el-input v-model="formLabelAlign.title" />
        </el-form-item>
        <el-form-item label="署名：" prop="name">
          <el-input v-model="formLabelAlign.name" />
        </el-form-item>
        <el-form-item label="链接有效期：" prop="date">
          <el-input-number
            v-model="formLabelAlign.date"
            :min="1"
            :max="100"
            style="width: 100px"
            controls-position="right"
          />
          <span style="margin: 0 10px">天</span>
        </el-form-item>
        <el-form-item label="添加字段：">
          <el-input
            v-for="item in formLabelAlign.items"
            v-model="item.value"
            :key="item.id"
            size="small"
            style="width: 100px; margin: 5px"
          >
            <template #suffix>
              <el-button
                style="color: #ea0a0a"
                link
                :icon="Close"
                @click="deleteItem(item.id)"
                v-show="deleteButton"
              />
            </template>
          </el-input>
          <div>
            <el-button
              size="small"
              type="primary"
              :icon="DocumentAdd"
              @click="addItem()"
              link
            >
              <span>添加</span>
            </el-button>
            <el-button
              type="primary"
              :icon="Delete"
              @click="deleteButton = !deleteButton"
              link
              size="small"
            >
              <span>删除</span>
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="文件类型：">
          <el-checkbox-group v-model="formLabelAlign.type">
            <el-checkbox label="文档" name="1" />
            <el-checkbox label="图片" name="2" />
            <el-checkbox label="视频" name="3" />
            <el-checkbox label="音频" name="4" />
            <el-checkbox label="不限" name="5" />
          </el-checkbox-group>
        </el-form-item>
        <!-- 提交按钮 -->
        <div style="display: flex; justify-content: center; width: 100%">
          <el-button type="primary" style="width: 100px" @click="onSubmit()"
            >提交</el-button
          >
        </div>
      </el-form>
      <el-card style="width: 50%" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>Card name</span>
            <el-button class="button" text>Operation button</el-button>
          </div>
        </template>
        <div v-for="o in 4" :key="o" class="text item">
          {{ 'List item ' + o }}
        </div>
      </el-card>
    </div>
  </el-card>
</template>

<script setup>
import { Close, Delete, DocumentAdd } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { uuid } from 'vue-uuid'

//作业收集
const formLabelAlign = ref({
  title: '',
  name: '',
  date: 1,
  time: '',
  type: [],
  items: [
    {
      value: '姓名',
      status: 1,
      id: uuid.v1()
    }
  ]
})
const deleteButton = ref(false)
// 添加字段
const addItem = () => {
  let flag = ref()
  formLabelAlign.value.items.forEach((item) => {
    if (item.value === '') {
      return (flag.value = 1)
    }
  })
  if (flag.value === 1) {
    ElMessage({
      type: 'warning',
      message: '请填完前面的字段'
    })
    flag.value === 0
    return
  }
  deleteButton.value = false
  if (formLabelAlign.value.items.length >= 5) {
    ElMessage({
      type: 'error',
      message: '字段最多添加5条'
    })
    return
  }
  formLabelAlign.value.items.push({
    value: '',
    status: 1,
    id: uuid.v1()
  })
}
// 删除字段
const deleteItem = (id) => {
  if (formLabelAlign.value.items.length === 1) {
    ElMessage({
      type: 'error',
      message: '至少要有一个字段'
    })
    deleteButton.value = false
    return
  }
  formLabelAlign.value.items = formLabelAlign.value.items
    .map((item) => {
      if (item.id === id) {
        return null
      } else {
        return item
      }
    })
    .filter((item) => item !== null)
}
//输入规则限制
const rules = ref({
  name: [{ required: true, message: '请输入你的署名', trigger: 'blur' }],
  title: [{ required: true, message: '请输入文件名称', trigger: 'blur' }]
})
const onSubmit = () => {}
</script>

<style lang="scss" scoped>
.box-card {
  margin-top: 20px;
  height: calc(100vh - var(--head-height) - 60px);
}
.card-header {
  span {
    font-size: larger;
    font-weight: 900;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  }
}
</style>
